<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/codemirror.css"/>
        <!--代码主题-->
        <!-- <link rel="stylesheet" href="theme/dracula.css"/> -->
        <!--支持代码折叠-->
        <!-- <link rel="stylesheet" href="addon/fold/foldgutter.css"/> -->
        <style>
            #codemirror-editor-container{
                padding: 15px;
            }
            .form-file-input{
                border: 1px solid #d4d4d5;
                line-height: 28px;
                margin: 10px 0;
                padding: 2px 5px;
                width: 180px;
            }
            .file-input-tips{
                color: #c2c2c2;
                font-size: 14px;
            }
            .CodeMirror{
                border: 1px solid #d4d4d5;
            }
        </style>
    </head>
    <body>
        <div id="codemirror-editor-container">
            <input class="form-file-input" id="file_name" type="text" placeholder="命名文件..."/>
            <span class="file-input-tips">根据文件后缀动态匹配样式</span>
            <textarea class="form-control" id="edit_area" name="content" style="display: none;"></textarea>
        </div>
        
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="js/codemirror.js"></script>
        <script src="mode/meta.js"></script>
        <script src="addon/mode/loadmode.js"></script>
        <script>
            var codeMirrorEditor;
            $(function(){
                initEditor();
            })
            
            function initEditor(){
                var $editArea = $('#edit_area');
                var $editFileName = $('#file_name');
                $editFileName
                    .on("keyup", function(e) {
                    var val = $editFileName.val(),
                        m,
                        mode,
                        spec,
                        extension,
                        extWithDot;
                    extension = extWithDot = "";
                    if ((m = /.+\.([^.]+)$/.exec(val))) {
                        extension = m[1].toLowerCase();
                        extWithDot = "." + extension;
                    }

                    var info = CodeMirror.findModeByExtension(extension);
                    if (info) {
                        mode = info.mode;
                        spec = info.mime;
                    }
                    
                    if (!codeMirrorEditor && !setCodeMirror($editArea)) {
                        return;
                    }

                    if (mode) {
                        codeMirrorEditor.setOption("mode", spec);
                        CodeMirror.modeURL = 'mode/%N/%N.js';
                        CodeMirror.autoLoadMode(codeMirrorEditor, mode);
                    }

                    if (lineWrapExtensions.indexOf(extWithDot) >= 0) {
                        codeMirrorEditor.setOption("lineWrapping", true);
                    } else {
                        codeMirrorEditor.setOption("lineWrapping", false);
                    }

                    var value = $editFilename.val();
                    if (value.length === 0) {
                        return;
                    }
                    value = value.split("/");
                    value = value[value.length - 1];
                    })
                .trigger("keyup");
                return true;
            }

            function setCodeMirror($editArea){
                codeMirrorEditor = CodeMirror.fromTextArea($editArea[0], {
                    lineNumbers: true
                });
                codeMirrorEditor.on("change", function(cm, change) {
                    $editArea.val(cm.getValue());
                });
            }
        </script>
    </body>
</html>